<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes openYourHeart {from {r: 0} to {r: 60px}}

    #myClip circle {
      animation: openYourHeart 15s infinite;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 100 100">
    <clipPath id="myClip">
      <!--
        圆圈外的所有东西都会被裁剪掉，因此不可见。
      -->
      <circle cx="40" cy="35" r="35" />
    </clipPath>
  
    <!-- 作为引用元素（英文原文：for reference）的黑色心形 -->
    <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
  
    <!--
      和上述黑色心形形状相同的红色心形，剪切路径是上面定义的圆；
      红色心形只有在圆内的部分可见。
    -->
    <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" />
  </svg>
</body>
</html>